@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';
@import 'bootstrap/scss/utilities';

// margin
$utilities: map-merge(
  $utilities,
  (
    'margin':
      map-merge(
        map-get($utilities, 'margin'),
        (
          values:
            map-merge(
              map-get(map-get($utilities, 'margin'), 'values'),
              (
                6: $spacer * 4,
                7: $spacer * 5,
                8: $spacer * 6,
                9: $spacer * 7,
              )
            ),
        )
      ),
  )
);

// margin-x
$utilities: map-merge(
  $utilities,
  (
    'margin-x':
      map-merge(
        map-get($utilities, 'margin-x'),
        (
          values:
            map-merge(
              map-get(map-get($utilities, 'margin-x'), 'values'),
              (
                6: $spacer * 4,
                7: $spacer * 5,
                8: $spacer * 6,
                9: $spacer * 7,
              )
            ),
        )
      ),
  )
);

// margin-y
$utilities: map-merge(
  $utilities,
  (
    'margin-y':
      map-merge(
        map-get($utilities, 'margin-y'),
        (
          values:
            map-merge(
              map-get(map-get($utilities, 'margin-y'), 'values'),
              (
                6: $spacer * 4,
                7: $spacer * 5,
                8: $spacer * 6,
                9: $spacer * 7,
              )
            ),
        )
      ),
  )
);

// width
$utilities: map-merge(
  $utilities,
  (
    'width':
      map-merge(
        map-get($utilities, 'width'),
        (
          values:
            map-merge(
              map-get(map-get($utilities, 'width'), 'values'),
              (
                5: 5%,
                10: 10%,
                15: 15%,
                65: 65%,
                70: 70%,
                80: 80%,
                85: 85%,
              )
            ),
        )
      ),
  )
);

// height
$utilities: map-merge(
  $utilities,
  (
    'height':
      map-merge(
        map-get($utilities, 'height'),
        (
          values:
            map-merge(
              map-get(map-get($utilities, 'height'), 'values'),
              (
                85: 85%,
                80: 80%,
                70: 70%,
                65: 65%,
              )
            ),
        )
      ),
  )
);

// opacity
$utilities: map-merge(
  $utilities,
  (
    'opacity':
      map-merge(
        map-get($utilities, 'opacity'),
        (
          values:
            map-merge(
              map-get(map-get($utilities, 'opacity'), 'values'),
              (
                10: 0.1,
                15: 0.15,
              )
            ),
        )
      ),
  )
);

// text-decoration
$utilities: map-merge(
  $utilities,
  (
    'text-decoration': (
      property: text-decoration,
      class: text-decoration,
      state: hover,
      values: none underline line-through,
    ),
  )
);

// cursor
$utilities: map-merge(
  $utilities,
  (
    'cursor': (
      property: cursor,
      class: cursor,
      values: auto default pointer zoom-in not-allowed copy wait help,
    ),
  )
);

/**
 * @import
 */
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
@import 'highlight.js/scss/tokyo-night-dark';
@import './imagestyle';
@import 'animate.css';

/**
 * var
 */
:root,
[data-bs-theme='light'] {
  --yw-bg-color: rgba(33, 37, 41, 0.5);
  --yw-bg-color-rgb: 33, 37, 41;
  --yw-bg-bg: #f8f9fa;
  --yw-bg-bg-rgb: 243, 244, 246;
}

[data-bs-theme='dark'] {
  --yw-bg-color: rgba(173, 181, 189, 0.5);
  --yw-bg-color-rgb: 173, 181, 189;
  --yw-bg-bg: #2b3035;
  --yw-bg-bg-rgb: 43, 48, 53;
}

// bg
.yw-bg {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--yw-bg-bg-rgb), var(--bs-bg-opacity)) !important;
}

// line
.yw-line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.yw-line-clamp-3 {
  @extend .yw-line-clamp;
  -webkit-line-clamp: 3;
}

// editor
.ck.ck-reset {
  --ck-color-base-background: var(--bs-card-bg);
  --ck-color-base-border: var(--bs-card-border-color);
  --ck-color-toolbar-background: var(--bs-card-bg);
  --ck-color-toolbar-border: var(--bs-card-border-color);
  --ck-color-text: var(--bs-body-color);
}

.ck-focused {
  border-color: #86b7fe !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%) !important;
}

.ck.ck-editor__editable_inline {
  --ck-border-radius: var(--bs-card-border-radius);
  min-height: 35em;
}

.ck-content pre {
  color: var(--bs-body-color) !important;
}

// font
.yw-font-jetBrains-mono {
  font-family: var(--font-jetBrains-mono);
}

// code
.yw-code-num-width {
  width: 2rem;
}

// h1-h6
h1:hover i.bi-hash {
  visibility: visible !important;
}

h2:hover i.bi-hash {
  visibility: visible !important;
}

h3:hover i.bi-hash {
  visibility: visible !important;
}

h4:hover i.bi-hash {
  visibility: visible !important;
}

h5:hover i.bi-hash {
  visibility: visible !important;
}

h6:hover i.bi-hash {
  visibility: visible !important;
}

// callout
.bd-callout {
  --bs-link-color-rgb: var(--bd-callout-link);
  --bs-code-color: var(--bd-callout-code-color);
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--bd-callout-color, inherit);
  background-color: var(--bd-callout-bg, var(--bs-gray-100));
  border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}

.bd-callout h4 {
  margin-bottom: 0.25rem;
}

.bd-callout > :last-child {
  margin-bottom: 0;
}

.bd-callout + .bd-callout {
  margin-top: -0.25rem;
}

.bd-callout .highlight {
  background-color: rgba(0, 0, 0, 0.05);
}

.bd-callout-info {
  --bd-callout-color: var(--bs-info-text-emphasis);
  --bd-callout-bg: var(--bs-info-bg-subtle);
  --bd-callout-border: var(--bs-info-border-subtle);
}

.bd-callout-warning {
  --bd-callout-color: var(--bs-warning-text-emphasis);
  --bd-callout-bg: var(--bs-warning-bg-subtle);
  --bd-callout-border: var(--bs-warning-border-subtle);
}

.bd-callout-danger {
  --bd-callout-color: var(--bs-danger-text-emphasis);
  --bd-callout-bg: var(--bs-danger-bg-subtle);
  --bd-callout-border: var(--bs-danger-border-subtle);
}
